<template>
  <a-menu
    theme="dark"
    mode="inline"
    :default-selected-keys="[$route.path]"
    id="side-menu"
  >
    <a-menu-item key="/home" @click="toDashboard">
      <a-icon type="dashboard" theme="filled" />
      <span>控制台</span>
    </a-menu-item>

    <a-menu-item key="/home/due-today" @click="toDueToday">
      <a-icon type="schedule" theme="filled" />
      <span>今日学习</span>
    </a-menu-item>

    <a-menu-item key="/home/new-cards" @click="toNewCards">
      <a-icon type="calendar" theme="filled" />
      <span>新的学习</span>
    </a-menu-item>
  </a-menu>
</template>

<script>
export default {
  methods: {
    toDashboard() {
      //   console.log(1);
      this.$router.push('/home');
    },
    toDueToday() {
      //   console.log(2);
      this.$router.push('/home/due-today');
    },
    toNewCards() {
      this.$router.push('/home/new-cards');
    },
  },
};
</script>

<style lang="scss" scoped>
#side-menu {
  background-color: $vue-color-primary;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected {
  background-color: $vue-color-secondary;
}
</style>
